<template>
    <div>
        <Headerbar></Headerbar>
        <el-container>
            <Sidebar></Sidebar>
            <el-main>
            <el-row :gutter="20">
                <el-col :span="12">
                    <h3 class="common-title"><i class="el-icon-edit"></i> 标签</h3>
                    <el-tag
                    :key="tag"
                    v-for="tag in dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)">
                    {{tag}}
                    </el-tag>
                    <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                    >
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                </el-col>
                <el-col :span="12">
                <!-- <h3 class="common-title"><i class="el-icon-view"></i> 清单详情</h3> -->
                </el-col>
            </el-row>

            </el-main>
        </el-container>
    </div>
</template>

<script>
    import Headerbar from '@/pages/Common/Headerbar'
    import Sidebar from '@/pages/Common/Sidebar'
    export default {
        name: 'List',
        components: {
            Headerbar,
            Sidebar
        },
        data () {
            return {
                dynamicTags: ['日常学习', '研讨技术', '娱乐项目'],
                inputVisible: false,
                inputValue: ''
            }
        },
        methods: {
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            }
        }        
    }
</script>
<style scoped>
  ul,li{
    list-style-type: none
  }
  .el-header {
    background-color: #F2F6FC;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>

